<template>

  <transition name='food'>
    <div ref='food'
         class='outter'
         v-show='foodshow'>
      <div class='food'>
        <div class="food-content">
          <div class="imgheader">
            <img class="img"
                 :src='food.image' />
            <div class='returnIcon'
                 @click='close'>
              <i class='icon-arrow_lift'></i>
            </div>
          </div>
          <div class="content">
            <div class="title">{{food.name}}</div>
            <div class="detail">
              <span class='sell-count'>月售{{food.sellCount}}份</span>
              <span class='rating'>好评率{{food.rating}}</span>
            </div>
            <div class="price">
              <span class="nowprice">￥{{food.price}}</span>
              <span class="oldprice"
                    v-show='food.oldPrice'><s>￥{{food.oldPrice}}</s></span>
            </div>
          </div>
          <div class="cartWrapper">
            <cartcontrol :food='food'></cartcontrol>
          </div>
          <div class="buy"
               v-show='!food.count||food.count==0'
               @click.stop.prevent='add(food,$event)'>加入购物车</div>

        </div>
        <split v-show='food.info'></split>
        <div class="info"
             v-show='food.info'>
          <h1 class='title'>商品信息</h1>
          <div class="foodInfo">{{food.info}}</div>
        </div>
        <split></split>
        <div class="rating">
          <h1 class='title'>商品评价</h1>
          <div class='ratingselect'>
            <ratingselect :selectType='selectType'
                          :onlyContent='onlyContent'
                          :ratings='food.ratings'
                          :desc='desc'
                          @typeselect='typechange'
                          @contentselect='contentchange'></ratingselect>
            <div class='rating-wrapper'>
              <ul v-show='food.ratings&&food.ratings.length'
                  class='ratingUl'>
                <li v-for='(rating,index) in food.ratings'
                    class='ratingItem'
                    :key='index'
                    v-show='needShow(rating.rateType,rating.text)'>
                  <div class='user'>
                    <span class='name'>{{rating.username}}</span>
                    <img class='avatar'
                         width='12'
                         height='12'
                         :src='rating.avatar' />
                  </div>
                  <div class="time">{{rating.rateTime | formatDate}}</div>
                  <div class="text">
                    <span :class='{"icon-thumb_up":rating.rateType===0,"icon-thumb_down":rating.rateType===1}'>
                    </span>{{rating.text}}

                  </div>
                </li>
              </ul>
              <div class='no-rating'
                   v-show='!food.ratings||!food.ratings.length'>暂无评价</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>

</template>
<script>
import BScroll from 'better-scroll'
import cartcontrol from '../cartcontrol/cartcontrol'
import ratingselect from '../ratingselect/ratingselect'
import split from '../split/split'
import Vue from 'vue'
import { formatDate } from '../../common/js/date.js'
// 全部 满意 不满意
// const POSITIVE = 0
// const NEGATIVE = 1
const ALL = 2
export default {
  name: 'food',
  props: {
    food: {
      type: Object
    }
  },
  components: {
    cartcontrol,
    split,
    ratingselect,
    onlyContent: true
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },
  methods: {
    add (food, event) {
      if (!event._constructed) {
        return
      }
      Vue.set(food, 'count', 1)
    },
    showFlag () {
      this.foodshow = true
      this.selectType = ALL
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.food, {
            click: true
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
    close () {
      this.foodshow = false
    },
    typechange (type) {
      this.selectType = type
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    contentchange () {
      this.onlyContent = !this.onlyContent
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    needShow (type, text) {
      // 判断是否显示内容
      if (this.onlyContent && !text) {
        return false
      }
      // 判断类型
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  data () {
    return {
      foodshow: false,
      selectType: ALL,
      onlyContent: true,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  }
}
</script>
<style lang="stylus">
@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/icon.styl'
@import '../../common/stylus/base.styl'
.outter
  position fixed
  top 0
  left 0
  bottom 58px
  width 100%
  background #fff
  z-index 30
  &.food-enter-active, &.food-leave-active
    transition all 0.2s linear
  &.food-enter
    transform translate3d(100%, 0, 0)
  &.food-leave-to
    transform translate3d(100%, 0, 0)
  .food
    .rating
      padding-top 18px
      .title
        line-height 14px
        margin-left 18px
        font-size 14px
        color rgb(7, 17, 27)
      .ratingselect
        .rating-wrapper
          padding 0 18px
          .ratingItem
            position relative
            padding 16px 0
            border-bottom 1px solid rgba(7, 17, 27, 0.2)
            .user
              position absolute
              right 0
              top 16px
              line-height 12px
              .name
                display inline-block
                vertical-align top
                font-size 10px
                color rgb(147, 153, 159)
            .time
              margin-bottom 6px
              line-height 12px
              font-size 10px
              color rgb(147, 153, 159)
            .text
              line-height 16px
              font-size 12px
              color rgb(7, 17, 27)
              .icon-thumb_up, .icon-thumb_down
                margin-right 4px
                line-height 24px
                font-size 12px
              .icon-thumb_up
                color rgb(0, 160, 220)
              .icon-thumb_down
                color rgb(7, 17, 27)
    .info
      padding 18px
      .title
        line-height 14px
        margin-bottom 6px
        font-size 14px
        color rgb(7, 17, 27)
      .foodInfo
        padding 0 8px
        font-size 12px
        line-height 24px
        color rgb(77, 85, 93)
    .food-content
      position relative
      .imgheader
        position relative
        width 100%
        height 0
        padding-bottom 100%
        img
          position absolute
          top 0
          left 0
          width 100%
          height 100%
        .returnIcon
          position absolute
          top 10px
          left 10px
          .icon-arrow_lift
            display block
            padding 10px
            font-size 20px
            color #fff
      .content
        padding 18px
        .title
          line-height 14px
          margin-bottom 8px
          font-size 14px
          weight 700
          color rgb(7, 17, 27)
        .detail
          margin-bottom 18px
          line-height 10px
          height 10px
          .sell-count, .rating
            font-size 10px
            color rgb(147, 153, 159)
          .sell-count
            margin-right 12px
        .price
          .nowprice
            color red
          .oldprice
            color color rgba(147, 153, 159, 0.2)
      .cartWrapper
        position absolute
        right 12px
        bottom 12px
      .buy
        position absolute
        right 18px
        bottom 18px
        z-index 10
        line-height 24px
        padding 0 12px
        font-size 10px
        border-radius 12px
        color #ffffff
        background rgb(0, 160, 220)
</style>
